.main-about {
  background: rgb(0, 0, 0);
}
.main__title-about {
  margin: 20px 0;
  margin-top: -100px;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  color: rgb(166, 145, 121);
}
.main__title-checkout {
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  color: rgb(166, 145, 121);
}
.column__title-about {
  font-size: 1.4em;
  font-weight: unset;
  text-align: left;
  color: white;
  padding: 10px;
}
.column__txt-about {
  color: white;
  padding: 10px;
  color: rgb(166, 145, 121);
}

.main__about__description {
  background: #222;
}
.about-img {
  height: 800px;
  object-fit: cover;
}

/*Slider Styles*/
@import url("https://fonts.googleapis.com/css?family=Roboto");

.slider {
  position: relative;
  overflow: hidden;
  height: 70vh;
  width: 100vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.slide.current {
  opacity: 1;
}

.slide .content {
  position: absolute;
  bottom: 40px;
  left: -600px;
  opacity: 0;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 20px;
}

.slide .content h1 {
  margin-bottom: 10px;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
  position: absolute;
  top: 40%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 40%;
  left: 15px;
}

.buttons button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

@media (max-width: 500px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

  .slide.current .content {
    transform: translateY(-300px);
  }
}

/* Backgorund Images */

.slide:first-child {
  background: url(../img/project1before.jpg) no-repeat center top/cover;
}
.slide:nth-child(2) {
  background: url(../img/project1after.jpg) no-repeat center top/cover;
}
.slide:nth-child(3) {
  background: url(../img/project9before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(4) {
  background: url(../img/project9done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(5) {
  background: url(../img/project11before1.png) no-repeat center top/cover;
}
.slide:nth-child(6) {
  background: url(../img/project11done1.png) no-repeat center top/cover;
}
.slide:nth-child(7) {
  background: url(../img/windowbefore1.jpg) no-repeat center top/cover;
}
.slide:nth-child(8) {
  background: url(../img/windowdone1.jpg) no-repeat center top/cover;
}
.slide:nth-child(9) {
  background: url(../img/Before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(10) {
  background: url(../img/After1.jpg) no-repeat center top/cover;
}
.slide:nth-child(11) {
  background: url(../img/Before.jpg) no-repeat center top/cover;
}
.slide:nth-child(12) {
  background: url(../img/After.jpg) no-repeat center top/cover;
}
.slide:nth-child(13) {
  background: url(../img/doorbefore1.jpg) no-repeat center top/cover;
}
.slide:nth-child(14) {
  background: url(../img/doordone1.jpg) no-repeat center top/cover;
}
.slide:nth-child(15) {
  background: url(../img/project1process.jpg) no-repeat center top/cover;
}
.slide:nth-child(16) {
  background: url(../img/project1done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(17) {
  background: url(../img/project8before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(18) {
  background: url(../img/project8done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(19) {
  background: url(../img/project2before2.jpg) no-repeat center top/cover;
}
.slide:nth-child(20) {
  background: url(../img/project2after2.jpg) no-repeat center top/cover;
}
.slide:nth-child(21) {
  background: url(../img/project2before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(22) {
  background: url(../img/project2done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(23) {
  background: url(../img/project3before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(24) {
  background: url(../img/project3done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(25) {
  background: url(../img/project3before2.jpg) no-repeat center top/cover;
}
.slide:nth-child(26) {
  background: url(../img/project3done2.jpg) no-repeat center top/cover;
}
.slide:nth-child(27) {
  background: url(../img/project6before1.jpg) no-repeat center top/cover;
}
.slide:nth-child(28) {
  background: url(../img/project6done1.jpg) no-repeat center top/cover;
}
.slide:nth-child(29) {
  background: url(../img/Project1B.jpg) no-repeat center top/cover;
}
.slide:nth-child(30) {
  background: url(../img/Project1A.jpg) no-repeat center top/cover;
}
.slide:nth-child(31) {
  background: url(../img/Project2B.jpeg) no-repeat center top/cover;
}
.slide:nth-child(32) {
  background: url(../img/Project2A.jpeg) no-repeat center top/cover;
}
.slide:nth-child(33) {
  background: url(../img/Project3B.jpg) no-repeat center top/cover;
}
.slide:nth-child(34) {
  background: url(../img/Project3A.jpg) no-repeat center top/cover;
}
.slide:nth-child(35) {
  background: url(../img/Project4B.jpg) no-repeat center top/cover;
}
.slide:nth-child(36) {
  background: url(../img/Project4A.PNG) no-repeat center top/cover;
}
.slide:nth-child(37) {
  background: url(../img/Project5B.jpg) no-repeat center top/cover;
}
.slide:nth-child(38) {
  background: url(../img/Project5A.jpg) no-repeat center top/cover;
}
.slide:nth-child(39) {
  background: url(../img/Project6B.jpg) no-repeat center top/cover;
}
.slide:nth-child(40) {
  background: url(../img/Project6A.jpg) no-repeat center top/cover;
}

/*Responsive Styles*/
@media screen and (min-width: 320px) {
  .main__title-about {
    margin-top: 100px;
    font-size: 1.8em;
  }
  .main__title-checkout {
    font-size: 1.2em;
    font-weight: bolder;
    text-align: center;
    color: rgb(166, 145, 121);
  }
}
@media screen and (min-width: 425px) {
  .main__title-about {
    margin-top: 100px;
    font-size: 1.8em;
  }
  .main__title-checkout {
    font-size: 1.8em;
    font-weight: bolder;
    text-align: center;
    color: rgb(166, 145, 121);
  }
}
@media screen and (min-width: 768px) {
  .main__title-about {
    margin-top: 100px;
    font-size: 2.5em;
  }
  .main__title-checkout {
    font-size: 2.6em;
    font-weight: bolder;
    text-align: center;
    color: rgb(166, 145, 121);
  }
}